<template>
  <div>
    <div class="header">
      <back></back>
      <span>
        <router-link :to="'/book/'+content.book">
          {{content.book_text}}
        </router-link>
      </span>

      <span class="home">
        <router-link to="/">
          <i class="fa fa-home"></i>
        </router-link>
      </span>
    </div>
    <div class="img" id="container">
      <p class="title">第{{content.end_number}}话：{{content.title}}</p>
      <div v-for="(i,index) in imgurl">
        <img :src="'http://api.ishuhui.com/'+i" alt="">
        <!--<img class="lazy-load" :data-original="'http://api.ishuhui.com/'+i"  alt="懒加载图片" />-->
      </div>

      <el-dialog title="提示" v-model="car" size="large">
        <span>漫画来自外部,需要跳转,确定要过去么？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="car = false">
            取 消
          </el-button>
          <el-button type="primary" @click="jump">
            确 定
          </el-button>
        </span>
      </el-dialog>
      <!--<img src="" alt="">-->
    </div>
    <div class="footer">

      <el-button-group>
        <el-button type="success" icon="arrow-left" :disabled="prev">
          <span @click="pre">上一章</span>
        </el-button>
        <el-button type="info" class="right" :disabled="next">
          <span @click="nexts">下一章</span>
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </el-button-group>
    </div>
    <loading v-if="showLoading"></loading>
  </div>
</template>
<script>
  // http://api.ishuhui.com/cartoon/post/ver/7e112443/id/5116.json   国产漫画
  // http://hhzapi.ishuhui.com/cartoon/post/ver/7e112443/id/6457.json 汉化
  import Back from "../components/Back"
  import Loading from "../components/Loading"

  export default {
    data() {
      return {
        uil: "",
        bid: "",
        content: {},
        img: [],
        imgurl: [],
        next: true,
        prev: true,
        car: false,
        showLoading:true
      }
    },
    components: {
      Back,Loading
    },
    methods: {
      gohh(val) {
        //   汉化版漫画请求
        this.showLoading = true
        this.axios.get('http://hhzapi.ishuhui.com/cartoon/post/ver/' + this.uil + '/id/' + val + '.json')
          .then(data => {
            // console.log(data)
            this.content = data.data.data
            if (this.content.next.id) {
              this.next = false
            } else {
              this.next = true
            }

            if (this.content.prev.id) {
              this.prev = false
            } else {
              this.prev = true
            }

            setTimeout(()=>{
              this.showLoading = false
            },2000)
            this.img = JSON.parse(this.content.content_img)

            this.imgurl = []
            for (var i in this.img) {
              this.imgurl.push(this.img[i])
            }
            if (this.imgurl.length == 0) {
              this.car = true
            }
          })
          .catch(err => {
            console.log(err)
            console.log("这个是国产漫画")
          })
      },
      goapi(val) {
        //   国产漫画  但是似乎汉化版的也能得到这些漫画   所以先留着吧
        return this.axios.get('http://api.ishuhui.com/cartoon/post/ver/' + this.uil + '/id/' + val + '.json')
      },
      nexts() {
        document.body.scrollTop = 0
        if(this.content.next.id){
          this.gohh(this.content.next.id)
        this.$router.push({path: '/details/' + this.content.next.id })
        }
      },
      pre() {
        document.body.scrollTop = 0
        if(this.content.prev.id){
          this.gohh(this.content.prev.id)
        this.$router.push({
          path: '/details/' + this.content.prev.id
        })
        }
      },
      jump(){
        this.car = false
        location.href = this.content.url
      }
    },
    created() {
      this.uil = localStorage.getItem('uil')
      this.bid = this.$route.params.did
      this.gohh(this.bid)
    }
  }

</script>
<style scoped>
  .header {
    text-align: center;
    background-color: #35495e;
    color: white;
    position: fixed;
    width: 100%;
    top: 0;
    height: 44px;
    line-height: 44px;
    z-index: 10;
  }
  
  .header a {
    color: white;
  }
  
  .header>span {
    font-size: .7rem;
  }
  
  .title {
    text-align: center;
    font-size: .4rem;
    margin: 5px 0;
  }
  
  .img {
    padding: 0 15px;
  }
  
  .img div {
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  
  img {
    width: 100%;
    height: 100%;
  }
  
  .el-button-group {
    width: 100%;
  }
  
  .right {
    float: right;
  }
  
  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
  }
  
  .home {
    float: right;
    margin-right: 20px;
  }
  
  .home a {
    color: white;
    font-size: .5rem;
  }

</style>
